<template>
  <a-modal
    v-model:open="modalStatus"
    :centered="true"
    title="单条配置"
    @ok="handleOk"
    @cancel="cancel"
  >
    <a-form
      class="modal_form"
      :model="modalFrom"
      name="basic"
      :label-col="{ style: 'width: 120px' }"
    >
      <a-form-item label="配置类型">
        <a-select
          style="display: block; width: 220px"
          v-model:value="modalFrom.type"
          :options="typesOptions"
          placeholder="请选择配置类型"
          @change="changeType"
        >
        </a-select>
      </a-form-item>
      <commentFrom v-if="modalFrom.type == 'comment'" :modalFrom="modalFrom" />
      <shoppIngFrom
        v-if="modalFrom.type == 'shoppIngpopUp'"
        :modalFrom="modalFrom"
      />
      <luckyBagFrom
        v-if="modalFrom.type == 'luckyBag'"
        :modalFrom="modalFrom"
      />
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";
import { typeOptions, xhsTypeOptions } from "./commit";
import commentFrom from "./configFrom/commentFrom.vue";
import shoppIngFrom from "./configFrom/shoppIngFrom.vue";
import luckyBagFrom from "./configFrom/luckyBagFrom.vue";

const emit = defineEmits(["updateItem"]);

const typesOptions = computed(() => {
  if (!showLuckyBag.value) {
    return xhsTypeOptions;
  }
  return typeOptions;
});

const modalStatus = ref<boolean>(false);
const showLuckyBag = ref(false); // 判断是否显示福袋选项

const modalFrom = ref({
  index: -1,
  type: undefined,
  commentText: "",
  serialNum: 1,
  interval: 100,
  isTop: false,
  delay: 0,

  peopleNum: 10,
  luckyBagIds: "",
});

function handleOk() {
  modalStatus.value = false;
  emit("updateItem", JSON.parse(JSON.stringify(modalFrom.value)));
  reset();
}

function reset() {
  modalFrom.value.index = -1;
  modalFrom.value.type = undefined;
  modalFrom.value.interval = 100;
  modalFrom.value.isTop = false;
  modalFrom.value.delay = 0;
  modalFrom.value.commentText = "";
  modalFrom.value.serialNum = 1;
  modalFrom.value.peopleNum = 10;
  modalFrom.value.luckyBagIds = "";
}

function open(data: any) {
  console.log(data, "typeof data.index");

  if (data && typeof data.index == "number") {
    modalFrom.value.index = data.index;
    modalFrom.value.type = data.type;
    modalFrom.value.interval = data.interval;
    modalFrom.value.isTop = data.isTop;
    modalFrom.value.delay = data.delay;
    modalFrom.value.commentText = data.commentText;
    modalFrom.value.serialNum = data.serialNum ? data.serialNum : 1;
    modalFrom.value.peopleNum = data.peopleNum ? data.peopleNum : 1;
    modalFrom.value.luckyBagIds = data.luckyBagIds ? data.luckyBagIds : "";
  }
  showLuckyBag.value = data.showLuckyBag;
  modalStatus.value = true;
}

function cancel() {
  modalStatus.value = false;
  showLuckyBag.value = false;
  reset();
}

function changeType() {
  modalFrom.value.commentText = "";
  modalFrom.value.serialNum = 1;
  modalFrom.value.interval = 100;
  modalFrom.value.isTop = false;
  modalFrom.value.delay = 0;
  modalFrom.value.peopleNum = 10;
  modalFrom.value.luckyBagIds = "";
}

defineExpose({
  open,
  close,
});
</script>

<style scoped lang="less">
.modal_form {
  margin-top: 20px;
  .add_live_config_btn,
  .ant-switch {
    display: block;
  }
}
</style>
